<template>

  <div class="additional-section">
    <div class="grid-container">
      <!-- First Subsection: Meetings -->
      <div class="grid-item">
        <div class="subsection-header left-align">
          <h3 class="subsection-title">会议</h3>
        </div>
        <div class="subsection-content">
          <p
              v-for="(meeting, index) in meetings"
              :key="index"
              @click="navigateTo(meeting.url)"
          >
            {{ meeting.text }}
          </p>
        </div>
      </div>

      <!-- Second Subsection: BHBD -->
      <div class="grid-item">
        <div class="subsection-header left-align">
          <h3 class="subsection-title">BHBD</h3>
        </div>
        <div class="subsection-content bhbd-content">
          <img src="/images/BHBD-logo.png" alt="BHBD" class="bhbd-image">
          <span class="bhbd-text">
            国际生物多样性与健康大数据联盟(BHBD）是在国际生物科学联合会(International Union of Biological Sciences, IUBS)
            倡导的"国际生物多样性及健康大数据共享（Open Biodiversity and Health Big Data Initiative）"计划框架下的一个非政府的非盈利性组织，
            旨在促进全球生物多样性及健康大数据的开放共享。
          </span>
        </div>
      </div>

      <!-- Third Subsection: Research -->
      <div class="grid-item">
        <div class="subsection-header left-align">
          <h3 class="subsection-title">科研动态</h3>
        </div>
        <div class="subsection-content left-align">
          <p
              v-for="(research, index) in researchs"
              :key="'research-'+index"
              @click="navigateTo(research.url)"
          >
            {{ research.text }}
          </p>
        </div>
      </div>

      <!-- Fourth Subsection: News -->
      <div class="grid-item">
        <div class="subsection-header left-align">
          <h3 class="subsection-title">新闻动态</h3>
        </div>
        <div class="subsection-content left-align">
          <p
              v-for="(newsItem, index) in news"
              :key="'news-'+index"
              @click="navigateTo(newsItem.url)"
          >
            {{ newsItem.text }}
          </p>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref } from 'vue';

const meetings = ref([
  {
    text: '第十届生命与健康大数据论坛，2025年10月15-17日，中国北京',
    url: 'https://www.baidu.com/s?wd=第十届生命与健康大数据论坛'
  },
  {
    text: '第九届生命与健康大数据论坛，2024年10月16-18日，中国北京',
    url: 'https://www.baidu.com/s?wd=第九届生命与健康大数据论坛'
  },
  {
    text: '第八届生命与健康大数据论坛，2023年10月18-20日，中国北京',
    url: 'https://www.baidu.com/s?wd=第八届生命与健康大数据论坛'
  },
  {
    text: '第七届生命与健康大数据论坛（线上），2022年10月26日，中国北京',
    url: 'https://www.baidu.com/s?wd=第七届生命与健康大数据论坛'
  },
  {
    text: '第六届生命与健康大数据论坛（线上），2021年10月15日，中国北京',
    url: 'https://www.baidu.com/s?wd=第六届生命与健康大数据论坛'
  },
  {
    text: '第五届生命与健康大数据论坛（线上），2020年10月15日，北京',
    url: 'https://www.baidu.com/s?wd=第五届生命与健康大数据论坛'
  },
  {
    text: '2019生命与健康大数据论坛, 2019年10月13-16日, 中国北京',
    url: 'https://www.baidu.com/s?wd=2019生命与健康大数据论坛'
  },
  {
    text: '第三届国际咨询委员会, 2019年10月17-19日, 中国北京',
    url: 'https://www.baidu.com/s?wd=第三届国际咨询委员会'
  }
]);

const researchs = ref([
  {
    text: '国家生物信息中心多组学数据资源体系持续拓展和更新 (2025年1月20日)',
    url: 'https://www.baidu.com/s?wd=国家生物信息中心多组学数据资源体系'
  },
  {
    text: '国家生物信息中心发布更新版癌症单细胞表达图谱数据库CancerSCEM 2.0 (2024年12月27日)',
    url: 'https://www.baidu.com/s?wd=CancerSCEM 2.0'
  },
  {
    text: '国家生物信息中心合作构建免疫衰老多组学数据库 (2024年12月11日)',
    url: 'https://www.baidu.com/s?wd=免疫衰老多组学数据库'
  },
  {
    text: '国家生物信息中心合作发布犬科动物多组学资源库iDog 2.0 (2024年12月4日)',
    url: 'https://www.baidu.com/s?wd=iDog 2.0'
  },
  {
    text: '国家生物信息中心合作研发基因编辑动物新发突变数据库VDGE (2024年11月4日)',
    url: 'https://www.baidu.com/s?wd=VDGE数据库'
  }
]);

const news = ref([
  {
    text: '国家基因组科学数据中心"招聘启事 (2025年3月11日)',
    url: 'https://www.baidu.com/s?wd=国家基因组科学数据中心招聘'
  },
  {
    text: '国家生物信息中心举办第九届生命与健康大数据国际研讨会暨第21届亚洲生物信息学联合研讨会 (2024年10月23日)',
    url: 'https://www.baidu.com/s?wd=第九届生命与健康大数据国际研讨会'
  },
  {
    text: '乌兹别克斯坦科学院代表团访问国家生物信息中心 (2024年9月2日)',
    url: 'https://www.baidu.com/s?wd=乌兹别克斯坦科学院访问'
  },
  {
    text: '国家基因组科学数据中心中医药分中心揭牌 (2024年7月5日)',
    url: 'https://www.baidu.com/s?wd=中医药分中心揭牌'
  },
  {
    text: '第一届生物数据资源学术会议暨中国生物信息学学会（筹）生物数据资源专委会成立大会召开 (2024年5月30日)',
    url: 'https://www.baidu.com/s?wd=生物数据资源学术会议'
  }
]);

const navigateTo = (url) => {
  if (url && url !== '#') {
    window.location.href = url;
  }
};
</script>

<style scoped>
/* Additional Section Styles */
.additional-section {
  background-color: #eef2f4;
  padding: 30px 8%; /* 左右留出20%间隔 */
  margin-top: 30px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: #d0d0d0;
}

.grid-item {
  background-color: white;
  padding: 15px; /* 减小内边距 */
  margin: 0; /* 移除默认外边距 */
}

.subsection-header {
  margin-bottom: 10px; /* 减小标题与内容的间距 */
}

/* Left-aligned header and content */
.left-align {
  text-align: left;
}

.subsection-title {
  color: black;
  font-weight: bold;
  display: inline-block;
  font-size: 16px; /* 标题字体大小保持不变 */
  margin: 5px 0; /* 调整标题上下间距 */
}

.subsection-content {
  color: #black;
  font-size: 14px; /* 减小内容字体大小 */
}

.subsection-content p {
  margin: 6px 0; /* 调整行间距 */
  cursor: pointer;
  text-align: left;
  position: relative;
  padding-left: 12px; /* 为·符号留出空间 */
}

.subsection-content p:before {
  content: "·";
  position: absolute;
  left: 0;
  color: black; /* 黑色·符号 */
}

.subsection-content p:hover {
  color: #black;
  text-decoration: underline;
}

/* BHBD Subsection Specific Styles */
.bhbd-content {
  display: flex;
  gap: 15px; /* 减小图片与文字的间距 */
}

.bhbd-image {
  width: 120px; /* 减小图片尺寸 */
  height: auto;
  object-fit: cover;
}

.bhbd-text {
  flex: 1;
  text-align: justify;
  color: #333;
  font-size: 14px; /* 减小字体大小 */
  position: relative;
  padding-left: 12px; /* 为·符号留出空间 */
}

.bhbd-text:before {
  content: "·";
  position: absolute;
  left: 0;
  color: black; /* 黑色·符号 */
}

/* Responsive Design */
@media (max-width: 768px) {
  .additional-section {
    padding: 20px 5%; /* 在小屏幕上减少左右间隔 */
  }

  .grid-container {
    grid-template-columns: 1fr;
  }

  .bhbd-content {
    flex-direction: column;
    gap: 10px;
  }

  .bhbd-image {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
}
</style>
